<template>
  <button @click="active = 0">首页</button>
  <button @click="active = 1">电影</button>
  <button @click="active = 2">关于</button>
  <hr />

  <Transition class="animate__animated container" v-bind="classObj">
    <component :is="tabs[active]"></component>
  </Transition>
</template>

<script setup>
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'
import { ref, watch } from 'vue'
import 'animate.css'

const tabs = [Home, Movie, About]
const active = ref(0)
const classObj = ref({})

// 从右向左的入场/离场动画
const leaveLeft = {
  'enter-active-class': 'animate__fadeInRight',
  'leave-active-class': 'animate__fadeOutLeft'
}
// 从左向右的入场/离场动画
const leaveRight = {
  'enter-active-class': 'animate__fadeInLeft',
  'leave-active-class': 'animate__fadeOutRight'
}

watch(active, (newActive, oldActive) => {
  if (newActive > oldActive) {
    // 从左向右
    classObj.value = leaveRight
  } else {
    // 从右向左
    classObj.value = leaveLeft
  }
})
</script>

<style scoped>
:global(body) {
  overflow-x: hidden;
}

.container {
  position: absolute;
}
</style>
